import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';
import 'package:s_k_todo/data/base_data.dart';
import 'package:s_k_todo/model/user_model.dart';
import 'package:s_k_todo/provider/user_provider.dart';
import 'package:s_k_todo/widget/base_page.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _State();
}

class _State extends BaseState<LoginPage> {
  @override
  Widget pageBuilder(BuildContext context, PageType pageType) {
    return Scaffold(
      body: Center(
        child: pageType == PageType.phone
            ? Column(children: [
                SizedBox(
                  height: 80,
                ),
                Logo(),
                SizedBox(
                  height: 80,
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 30),
                  child: LoginBody(pageType),
                )
              ])
            : Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Expanded(
                    flex: 1,
                    child: Center(child: Logo()),
                  ),
                  ConstrainedBox(
                      constraints: BoxConstraints(maxWidth: 300),
                      child: LoginBody(pageType)),
                  SizedBox(
                    width: 40,
                  )
                ],
              ),
      ),
    );
  }
}

class LoginBody extends StatelessWidget {
  PageType type;

  LoginBody(this.type);

  @override
  Widget build(BuildContext context) {
    UserProvider provider = context.watch();
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5),
          color: Colors.white,
          boxShadow: type == PageType.phone
              ? []
              : [
                  BoxShadow(
                      offset: Offset(0, 1),
                      blurRadius: 5,
                      spreadRadius: 2,
                      blurStyle: BlurStyle.normal,
                      color: Theme.of(context).primaryColor.withOpacity(.3))
                ]),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            "Login",
            style: Theme.of(context)
                .textTheme
                .titleLarge
                ?.copyWith(fontWeight: FontWeight.bold),
          ),
          const SizedBox(
            height: 50,
          ),
          TextField(
              onChanged: provider.changePhone,
              decoration: InputDecoration(
                  border: OutlineInputBorder(), label: Text("UserName"))),
          const SizedBox(
            height: 15,
          ),
          TextField(
            onChanged: provider.changePassword,
            decoration: InputDecoration(
                border: OutlineInputBorder(), label: Text("Passworld")),
          ),
          const SizedBox(
            height: 20,
          ),
          FilledButton(
            style: ButtonStyle(
                padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
                    EdgeInsets.symmetric(vertical: 20))),
            onPressed: !provider.canLogin
                ? null
                : () async {
                    BaseData<TokenData> data = await provider.login();
                    if (data.code == 0) {
                      context.replace("/home");
                    }
                  },
            child: Text("login"),
          ),
          Row(
            children: [
              Spacer(),
              TextButton(onPressed: () {}, child: Text("register"))
            ],
          ),
          const SizedBox(
            height: 20,
          ),
        ],
      ),
    );
  }
}

class Logo extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          RichText(
              text: TextSpan(
                  text: "SK",
                  style: Theme.of(context).textTheme.headlineLarge?.copyWith(
                      color: Theme.of(context).primaryColor,
                      fontWeight: FontWeight.bold),
                  children: [
                TextSpan(
                    text: "TODO",
                    style: Theme.of(context)
                        .textTheme
                        .headlineLarge
                        ?.copyWith(fontWeight: FontWeight.bold))
              ]))
        ],
      );
}
